<template>
  <div class="content">
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(val,index) in yearOrder" :key="index" :title="val" :name="val">
        <PaperCard 
          v-for="(i,index) in papers[val]" :key="index" 
          :author  = "i.author"
          :title = "i.title"
          :journal = "i.journal"
          :pdfUrl  = "i.pdfUrl"
          :imgUrl  = "i.imgUrl"
        />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import PaperCard from "./PaperCard.vue"


export default {
  components: { PaperCard },
  data() {
    return {
      activeNames: [],
      yearOrder: [],
      papers: [],

    };
  },
  created() {
    this.$http.get('/json/Publications.json').then((response) => {
      console.log(response);
      this.activeNames = response.data.activeNames;
      this.yearOrder = response.data.yearOrder;
      this.papers = response.data.papers;

    });
  }

};
</script>

<style lang="less" scoped>
@import "../el-collapse-item.less";
</style>
